<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <style type="text/css">
    	.panel {
    		width: 200px;
    		border: #ccc solid 1px;
    		margin-bottom: 15px;
    	}
    	
    	.panel > * {
    		padding: 10px;
    	}
    	
    	.content, .footer {
    		border-top: #ccc solid 1px;
    	}
    	
    </style>
    <title></title>
</head>
<body class="container-fluid"><br>

    <div id="app">
		<panel>
			<div slot="title">123</div>
			<div slot="content">456</div>
			<div slot="footer">789</div>
		</panel>
		<panel>
			<div slot="title">lxk</div>
			<div slot="content">qwe</div>
			<div slot="footer">asd</div>
		</panel>
    </div>
	
	<!--slot 相当于占位符-->
    <template id="panel">
        <div class="panel">
			<header class="title">
				<slot name="title">title</slot>
			</header>
			<div class="content">
				<slot name="content">content</slot>
			</div>
			<footer class="footer">
				<slot name="footer">footer</slot>
			</footer>
        </div>
    </template>






    <script src="js/vue.js" ></script>
    <script>
        Vue.component('panel',{
            template: '#panel'
        });

        var vm = new Vue({
            el: '#app',
            data: {

            }
        });

    </script>
</body>
</html>
